0<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>植物信息</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			span {
				margin: 10px;
			}
			.Tabl {
				height: 50px;
				width: 88%;
				font-size: 14px;
				font-weight: bold;
				text-align: left;
				margin-left: 6%;
			}
			.Td1 {
				color: #B8B8B8;
				width: 110px;
			}
			.Td2 {
				color: #000000;
				text-align: left;
			}
			.Hr {
				height: 1px;
				width: 96%;
				background-color: #B8B8B8;
				margin-left: 2%;
			}
			.Butt {
				border: 1px solid #B8B8B8;
				border-radius: 20px;
				color: #FFFFFF;
				height: 17px;
				width: 17px;
				outline: none;
			}
			.TabImg {
				height: 150px;
				width: 96%;
				margin-left: 2%;
				border: 10px solid #D8D8D8;
			}
			.TdImg1 {
				height: 110px;
				width: 90px;
			}
			.TdImg2 {
				height: 110px;
				width: 90px;
			}
			.ButAdd {
				height: 110px;
				width: 100px;
				font-size: 100px;
				color: #FFFFFF;
				background-color: #B8B8B8;
			}
			.TabL {
				height: 75px;
				width: 88%;
				font-size: 16px;
				font-weight: bold;
				text-align: left;
				margin-left: 6%;
			}
			.ButL {
				height: 40px;
				width: 100%;
				background-color: #D0D0D0;
				position: fixed;
				bottom: 0;
			}
			.Td3 {
				text-align: center;
				width: 50%;
			}
			html, body {
				background-color: #F5F6F6;
			}
			ul {
				position: relative;
				width: 100%;
			}
			ul li {
				list-style: none;
			}
			ul li input {
				display: none;
			}
			ul li label {
				float: left;
				width: 33%;
				text-align: center;
				line-height: 34px;
				height: 35px;
				border-right: 0;
				box-sizing: border-box;
				cursor: pointer;
				transition: all .3s;
				background-color: #1abc9c;
				color: #fff;
			}
			ul li input:checked+ label {
				color: #000;
				background-color: #F5F6F6;
			}
			ul li:last-child label {
				border-right: 1px solid #1abc9c;
			}
			ul li .content {
				opacity: 0;
				visibility: hidden;
				position: absolute;
				left: 0;
				top: 31px;
				width: 100%;
				height: auto;
				box-sizing: border-box;
				transition: all .3s;
			}
			ul li .content table {
				width: 100%
			}
			ul li .content td {
				border-bottom: 1px solid #DFE0E0;
				height: 60px;
			}
			ul li .content td:nth-child(1) {
				padding-left: 10px;
			}
			ul li .content td:nth-child(1) p:nth-child(2) {
				color: #555555
			}
			ul li:nth-child(1) .content {
				background-color: #F5F6F6;
			}
			ul li:nth-child(2) .content {
				background-color: #F5F6F6;
			}
			ul li:nth-child(3) .content {
				background-color: #F5F6F6;
			}
			ul li input:checked~
			.content {
				opacity: 1;
				visibility: visible;
			}
			.Add {
				height: 40px;
				width: 96%;
				background-color: #1ABC9C;
				color: white;
				text-align: center;
				font-size: 15px;
				margin-top: 20px;
				outline: none;
			}
			.fontcolr {
				color: #cccccc
			}
			.clickfont {
				color: #72EDD1
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<input id="tab1" type="radio" name="tab" checked>
				<label for="tab1">绿地信息</label>
				<div class="content">
					<table class="Tabl">
						<tr>
							<td class="Td1">绿地名称</td>
							<td class="Td2"><span style="color:#FF8C00">大东绿地</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<table class="Tabl">
						<tr>
							<td class="Td1">绿地类型</td>
								<td class="Td2"><span style="color:#FF8C00">正常</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<table class="Tabl">
						<tr>
							<td class="Td1">建成时间</td>
							<td class="Td2"><span style="color:#FF8C00">2019-10-11</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<table class="Tabl">
						<tr>
							<td class="Td1">绿地面积</td>
							<td class="Td2"><span style="color:#FF8C00">433㎡</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<table class="Tabl">
						<tr>
							<td class="Td1">养护级别</td>
							<td class="Td2"><span style="color:#FF8C00">二级</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<table class="Tabl">
						<tr>
							<td class="Td1">位置信息</td>
							<td class="Td2"><span style="color:#FF8C00">大东</span></td>
						</tr>
					</table>
					<hr class="Hr"/>
					<div style="padding: 10px;">
						<ul class="upload-ul clearfix">
							<li class="upload-pick">
								<div class="webuploader-container clearfix" id="goodsUpload"></div>
							</li>
						</ul>
					</div>
				</div>
			</li>
			<li>
				<input id="tab2" type="radio" name="tab">
				<label for="tab2">植物管理</label>
				<div class="content">
					<table>
						<tr>
							<td>
							<p>
								序号：01
							</p>
							<br>
							<p class="fontcolr">
								类别：落叶乔木
							</p></td>
							<td width="100">
							<p class="clickfont" onclick="openDetail('yanghu/yanghu_window.html')">
								树种：白皮松
							</p>
							<br>
							<p class="fontcolr">
								数量：5
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
						<tr>
							<td>
							<p>
								序号：01
							</p>
							<br>
							<p class="fontcolr">
								类别：落叶乔木
							</p></td>
							<td width="100">
							<p class="clickfont" onclick="openDetail('yanghu/yanghu_window.html')">
								树种：白皮松
							</p>
							<br>
							<p class="fontcolr">
								数量：5
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
						<tr>
							<td>
							<p>
								序号：01
							</p>
							<br>
							<p class="fontcolr">
								类别：落叶乔木
							</p></td>
							<td width="100">
							<p class="clickfont" onclick="openDetail('yanghu/yanghu_window.html')">
								树种：白皮松
							</p>
							<br>
							<p class="fontcolr">
								数量：2
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
					</table>
				</div>
			</li>
			<li>
				<input id="tab3" type="radio" name="tab">
				<label for="tab3">统计分析</label>
				<div class="content">
					<table>
						<tr>
							<td>
							<p>
								临沂高铁站南广场绿地
							</p>
							<br>
							<p class="fontcolr">
								洒水车
							</p></td>
							<td width="100">
							<p>
								司机：李斌
							</p>
							<br>
							<p class="fontcolr">
								2019-10-10
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
						<tr>
							<td>
							<p>
								临沂高铁站南广场绿地
							</p>
							<br>
							<p class="fontcolr">
								洒水车
							</p></td>
							<td width="100">
							<p>
								司机：李斌
							</p>
							<br>
							<p class="fontcolr">
								2019-10-10
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
						<tr>
							<td>
							<p>
								临沂高铁站南广场绿地
							</p>
							<br>
							<p class="fontcolr">
								洒水车
							</p></td>
							<td width="100">
							<p>
								司机：李斌
							</p>
							<br>
							<p class="fontcolr">
								2019-10-10
							</p></td>
							<td width="50"><img src="../image/update.png" height="55%" onclick="openDetail('yanghu/yanghu_window.html')"/></td>
						</tr>
					</table>
				</div>
			</li>
		</ul>
	</body><script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript">
		apiready = function() {
			id = api.pageParam.id;
			var app = new Vue({
				el : '#qqq',
				data : {
					todos:[
				
				]	
				},
				created : function() {
					$.ajax({
						type : "post",
						//async : false, //同步执行
						url : BaseServiceUrl+"mobile/appcodegreenland/list.json",
						data : {
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {
							
							
								app.todos.push(result.datas)
								//app.todos.push(url)
						
						}
					});
				}
			})			

		
//			//上传图片
//			var $tgaUpload = $('#goodsUpload').diyUpload({
//				url : '/uploadFilePath',
//				success : function(data) {
//				},
//				error : function(err) {
//				},
//				buttonText : '',
//				accept : {
//					title : "Images",
//					extensions : 'gif,jpg,jpeg,bmp,png'
//				},
//				thumb : {
//					width : 50,
//					height : 50,
//					quality : 100,
//					allowMagnify : true,
//					crop : true,
//					type : "image/jpeg"
//				}
//			});
		};
		//选择正常或者异常
		flag = "btn1";
		function btn1() {
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
		}

		function btn2() {
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
		}

		function btn(num) {
			if (num == 1) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn1").style.color = "#FFFFFF";
				document.getElementById("btn1").style.backgroundColor = "#FF8C00";
				flag = "btn1";
			}
			if (num == 2) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn2").style.color = "#FFFFFF";
				document.getElementById("btn2").style.backgroundColor = "#FF8C00";
				flag = "btn2";
			}
		}
	</script>
</html>
